<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网格布局</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .masonry{
      display: flex;
      /* flex-direction: row; */
    }
    .column{
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 0 2px;
    }
    .item{
      margin-bottom: 5px;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="page" id="app">
    <div class="masonry">
      <div class="column">
        <img class="item" v-for="i in data1"  :src="i.img" alt="">
      </div>
      <div class="column">
        <img class="item" v-for="i in data2"  :src="i.img" alt="">
      </div>
      <div class="column">
        <img class="item" v-for="i in data3"  :src="i.img" alt="">
      </div>

    </div>
  </div>
  <script>
    // const data = import('./data.json')
    let app = new Vue({
      el: '#app',
      data() {
        let data = [
          {
            "id": 0,
            "value": "Consequatur in ipsa ab sapiente enim. Accusantium aut est voluptas sequi. Quibusdam neque aperiam dolor. Excepturi sunt a minus fuga autem excepturi cupiditate. Fuga aspernatur incidunt aliquid.",
            "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fdd502cc56049fca09420e7b77a786bc5c7a9b3ffb1371-l7vKt5_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639726450&t=68bca7929b56d6899456e57e0aa4cbed"
          },
          {
            "id": 1,
            "value": "Sit qui consequuntur vel quibusdam sit ea sint. Repellendus unde ducimus sed dolor sint iste. Expedita voluptas iste adipisci eos. Impedit dignissimos ratione animi dolorem est.",
            "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-08-28%2F5d6649239aed2.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639726450&t=8152e0d33fc4ec9c52da45df92457452"
          },
          {
            "id": 2,
            "value": "Fugiat deserunt doloremque molestiae veritatis beatae aut. Eveniet voluptas sunt accusamus. Quis quos hic itaque. Eveniet est repellendus. Odit sed sint. Repellendus est et.",
            "img": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.article.pchome.net%2F00%2F46%2F27%2F22%2Fpic_lib%2Fs960x639%2FFGHJ_073016s960x639.jpg&refer=http%3A%2F%2Fimg.article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639726450&t=2a479dde37a49d3d87aa03a0c12b5913"
          },
          {
            "id": 3,
            "value": "Quas et fuga eos ducimus reprehenderit necessitatibus. Molestiae fuga maiores nobis id. Id debitis id dignissimos magni repellendus quae. Neque aut officia quia dolorem consequatur facilis esse. Ipsam et in aut est voluptatibus qui labore. Esse qui harum dolores.",
            "img": "https://t7.baidu.com/it/u=2942499027,2479446682&fm=193&f=GIF "
          },
          {
            "id": 4,
            "value": "Eligendi mollitia est alias molestiae et voluptas ut natus aliquid. Dolorem autem saepe. Accusamus quae quia excepturi iure sint eum vitae. Voluptas rerum soluta rerum ex unde.",
            "img": "https://t7.baidu.com/it/u=3165657288,4248157545&fm=193&f=GIF"
          },
          {
            "id": 5,
            "value": "Provident rerum fugiat qui. Soluta eos reiciendis alias rerum et sunt animi commodi. Omnis temporibus quia accusantium laudantium distinctio porro nostrum dolores voluptas. Quibusdam assumenda laudantium exercitationem ipsam. Quia repellendus ut a ea sed recusandae debitis. In velit odit alias quod est nulla maxime est reprehenderit.",
            "img": "https://t7.baidu.com/it/u=3240224891,3518615655&fm=193&f=GIF"
          },
          {
            "id": 6,
            "value": "Aliquam laborum sit ipsam. Odit possimus culpa voluptatem.",
            "img": "https://t7.baidu.com/it/u=3734967019,941734598&fm=193&f=GIF"
          },
          {
            "id": 7,
            "value": "Veritatis eum aut officiis ut libero sed accusantium neque mollitia. Quisquam velit ratione adipisci at quos officiis nulla porro. Expedita soluta iure accusamus eius modi accusantium temporibus. Cumque omnis et. Voluptatem officiis labore molestiae nostrum numquam quia. Dolorem itaque et maiores atque beatae.",
            "img": "https://t7.baidu.com/it/u=71977564,2288086088&fm=193&f=GIF"
          },
          {
            "id": 8,
            "value": "Magnam dolor vel reprehenderit. Tenetur perspiciatis nam rerum quo molestias eligendi itaque atque. Reprehenderit laboriosam qui ipsam dolorum hic. Aut enim odit tempore et sed saepe dignissimos. Praesentium sapiente optio aut consequatur et est. Quaerat nam enim natus consequuntur temporibus.",
            "img": "https://t7.baidu.com/it/u=1126218742,3382842115&fm=193&f=GIF"
          },
          {
            "id": 9,
            "value": "Sed et rerum tenetur. Veritatis blanditiis harum aut voluptatem unde quisquam neque ab quod. Doloribus sequi adipisci at quae amet molestiae voluptatem impedit expedita. Iusto nam unde molestiae enim deserunt quos. Quasi voluptatem amet voluptatibus eius et.",
            "img": "https://t7.baidu.com/it/u=2860139544,3309382475&fm=193&f=GIF"
          },
         
          
        ]
        let data1 = [],data2 = [], data3 = [], i = 0
        while(i < data.length){
          data1.push(data[i++])
          if(i < data.length){
          data2.push(data[i++])
          }
          if(i < data.length){
          data3.push(data[i++])
          }
        }
        return {
          data1,
          data2,
          data3
        }
        
      }
    })
  </script>
</body>

</html>